<template>
    <div id="video-wrapper">
        <div class="collection"  v-if="videoDate!=null">
          <ul>
               <li v-for="(item,idx) in videoDate" :class="{'active':select== idx}">
                  <div class="time" @click="showCollect(idx)">
                      {{item}}
                      <i :style= "'background-image: url('+$qiniu.url+'assets/img/jianshen.png)'"  class="xiaosanjiao"></i>
                  </div>
                  <div class="vedio-collect clearfix">
                      <div class="videoparent">
                          <div class="vedio-wrapper " v-for="item2 in videoShow">
                          <div class="video">
                              <!--<i :style= "'background-image: url('+$qiniu.url+'assets/img/jianshen.png)'"></i>-->
                              <div class="img" :style="{ backgroundImage: 'url(' + item2.video + ')' }"></div>
                          </div>
                          <p>{{ item2.coursename }}</p>
                      </div>
                      </div>
                      <button @click="test" v-if="videoInfo.length>=10">点击</button>
             </div>
            </li>
          </ul>
      </div>
      <div class="collection noneCollect"  v-else>
          暂无收藏视频
      </div>
       <Loading v-if="LoadingShow"></Loading>
    </div>
</template>
<script>
    import {
        errFun,
        getToday,
    } from '../../tools.js';
    import api from "../../api";
    import Loading from '../loading.vue';
    export default {
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            add() {
                this.videoShow = this.videoInfo;
            },
        },
        data() {
            return {
                select: 12,
                videoDate: [],
                videoShow: [],
                videoInfo: [],
                n: 0,
                m: 10,
                date: {
                    year: getToday(new Date()).year,
                    month: getToday(new Date()).month,
                }
            }
        },
        created() {
            // document.title=this.$route.meta.title;
        },
        methods: {
            test() {
                var target = event.target;
                var parent = target.parentNode;
                var childOne = parent.children[0];
                //每次切割不同的数组长度进行遍历
                this.n += 10;
                this.m += 10;
                if (this.m >= this.videoInfo.length) {
                    this.n = this.n - (this.m - this.videoInfo.length);
                    target.style.display = "none";
                }
                this.videoShow = this.videoInfo.slice(this.n, this.m);
                var html = '';
                for (var i = 0; i < this.videoShow.length; i++) {
                    html += '<div class="vedio-wrapper "><div class="video"> <video src="' + this.videoShow[i].video + '"></video></div><p>' + this.videoShow[i].coursename + this.videoShow[i].id + '</p></div>'
                }
                childOne.innerHTML = html;
            },
            showCollect(i) {
                // this.$store.dispatch('CHANGE_LOADING_SHOW');
                // event.stopPropagation;
                this.select = i;
                //首先找到当前元素
                var xiaosanjiaos = document.querySelectorAll(".xiaosanjiao");
                var target = event.target; //是time
                if (target.nodeName == "DIV") {
                    target = target;
                } else {
                    target = target.parentNode;
                }
                var that = target.parentNode; //是li标签
                var oldH, newH;
                var id = i;
                var list = document.querySelectorAll("li");
                var date = this.videoDate[id];
                var self = this;
                api.getCollectVideo(date).then(function(result) {
                    self.videoInfo = result.data;
                    self.videoShow = self.videoInfo.slice(0, 10);
                    setTimeout(function() {
                        oldH = target.offsetHeight; //获取一个不变的值
                        newH = that.children[1].offsetHeight + oldH;
                        for (var i = 0; i < list.length; i++) {
                            list[i].style.height = oldH + "px";
                            xiaosanjiaos[i].classList.remove("show");
                        }
                        if (that.offsetHeight == oldH) {
                            list[id].style.height = newH + "px";
                            xiaosanjiaos[id].classList.add("show");
                        } else {
                            list[id].style.height = oldH + "px";
                            xiaosanjiaos[id].classList.remove("show");
                            self.n = 0, self.m = 10;
                        }
                    }, 10)
                })

            },
        },
        mounted() {
            this.$nextTick(function() {
                var that = this;
                // that.$store.dispatch('CHANGE_LOADING_SHOW');
                //获取当前的日期
                api.getCollectDate(this.date).then(function(result) {
                    that.videoDate = result.data;

                    // that.$store.dispatch('HIDDEN_LOADING_SHOW');
                })
            })
        },
        components: {
            Loading,
        },
    }
</script>
<style>
    #video-wrapper {
        .collection {
            width: 100%;
            padding-left: 15px;
            margin-bottom: 20px;
        }
        .noneCollect {
            width: 100%;
            height: 40px;
            position: absolute;
            left: 0;
            top: -30%;
            right: 0;
            bottom: 0;
            margin: auto;
            line-height: 40px;
            text-align: center;
            color: rgba(253, 184, 1, 1);
            font-size: 14px;
            border-bottom: 1px solid rgba(253, 184, 1, 1);
            padding: 0;
        }
        .collection ul {
            width: 100%;
        }
        li {
            width: 100%;
            height: 51px;
            overflow: hidden;
        }
        li.active {
            transition: all .8s;
        }
        li .time {
            width: 100%;
            height: 50px;
            font-size: 14px;
            line-height: 50px;
            color: #fff;
            border-bottom: 1px solid #888;
            position: relative;
        }
        li .time i {
            width: 20px;
            height: 20px;
            background-position: -153px 0px;
            background-repeat: no-repeat;
            background-size: 250px 20px;
            position: absolute;
            left: 0;
            top: 0;
            right: -77%;
            bottom: 0;
            margin: auto;
        }
        li .time i.show {
            background-position: -200px 2px;
        }
        li .vedio-collect {
            width: 100%;
            padding: 10px 0;
            box-sizing: border-box;
            border-bottom: 1px solid #888;
        }
        li .vedio-collect .vedio-wrapper {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;
            box-sizing: border-box;
            float: left;
        }
        li .vedio-collect .vedio-wrapper .img {
            width: 100%;
            height: 80px;
            display: block;
            position: relative;
        }
        li .vedio-collect .vedio-wrapper .video video {
            width: 100%;
            height: 100%;
        }
        li .vedio-collect .vedio-wrapper .video i {
            width: 20px;
            height: 20px;
            background-position: -175px -2px;
            background-repeat: no-repeat;
            background-size: 250px 20px;
            position: absolute;
            bottom: 7px;
            left: 7px;
        }
        li .vedio-collect .vedio-wrapper p {
            font-size: 14px;
            line-height: 20px;
            color: #fff;
        }
    }
</style>